<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>UserList</title>
</head>
<body>
	<div>


		<div>
			<h1> 第一种分页显示方式</h1>
			{% for i in userlist %}
				<p>{{ i }}</p>
			{% endfor %}
			<p>
				 <!--userlist.paginator.page_range 这个函数返回包含一个所有页码数的 range 对象
				 即 range(1, userlist.paginator.num_pages + 1)-->
				{% for page_number in userlist.paginator.page_range %}
					{% ifequal page_number  userlist.number %}
						{{ page_number }}
					{% else %}
						<a href="?page={{ page_number }}">{{ page_number }}</a>
					{% endifequal %}
				{% endfor %}
			</p>
		</div>

		<div>
			<h1> 另一种分页显示方式 </h1>
			<!--userlist是后端传递过来的列表-->
			{% for i in userlist %}
				<p>{{ i }}</p>
			{% endfor %}
			<form action="/tpl/userlist" method="POST">
				<span>
					{% if userlist.has_previous %}
						<a href="?page={{ userlist.previous_page_number }}">Previous</a>
						{% endif %}
						{# userlist.paginator.number_pages 返回总页数 #}
						Page {{ userlist.number }} of {{ userlist.paginator.num_pages }}.
					{% if userlist.has_next %}
						<a href="?page={{ userlist.next_page_number }}">Next</a>
					{% endif %}
				</span>

				<span>
					<select name="page">
						{% for i in userlist.paginator.page_range %}
							<option value="{{ i }}"> {{ i }} </option>
						{% endfor %}
					</select>
				</span>
				<span>
					<input id="jump" type="submit" value="跳转" />
				</span>
			</form>
		</div>
	</div>
	<script src="/static/jquery-2.1.1.min.js"></script>
	<script>
		$('#jump').click(function () {
			console.log(123)
		})
	</script>
</body>
</html>